<template>
  <div class="login_box">
<!--      model:表单数据对象，表单绑定的数据
          rules：表单验证规则
          ref：可以根据这个属性获取这个表单-->
      <el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="用户名" prop="uname">
              <el-input v-model="loginForm.uname"  @keyup.enter="login"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pwd" show-password>
              <el-input v-model="loginForm.pwd"  @keyup.enter="login"></el-input>
          </el-form-item>
          <el-form-item>
              <el-button type="primary" @click="login">登录</el-button>
          </el-form-item>
      </el-form>
  </div>
</template>

<script>
export default {
    name: "Login",
    methods: {
        login() {
            //固定this
            const self = this
            //根据ref属性获取表单
            //validate：触发表单验证
            //valid：表单验证结果，boolean类型，true表示表单验证通过，false表示验证不通过
            this.$refs['loginForm'].validate((valid) => {
                if (valid) {
                    this.$http.post('login', this.loginForm).then(res => {
                        //请求成功的回调，返回res
                        if(res.data === 'success') {
                            //登录成功
                            //将uname存入session
                            sessionStorage.setItem("uname", self.loginForm.uname)
                            //通过提交mutation修改State中的name值
                            // this.$store.commit("setUname", {uname : self.loginForm.uname})
                            self.$store.dispatch('setUserName', {uname : self.loginForm.uname})
                            this.$router.push("/home")
                        } else {
                            this.$message.error('用户名或密码错误');
                        }

                    }).catch(error => {
                        //请求失败的回调
                        this.$message.error('登录请求失败，请联系管理员');
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
    },
    data() {
        return {
            //登录表单数据
            loginForm: {
                uname: ""
                ,pwd: ""
            },
            rules: {
                uname: [
                    //required：true，表示必填
                    //message:不满足验证规则时的提示语
                    //trigger:验证规则的触发时机
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                ],
                pwd: [
                    //required：true，表示必填
                    //message:不满足验证规则时的提示语
                    //trigger:验证规则的触发时机
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ],
            }
        }
    },

}
</script>

<style scoped>
.login_box {
    width: 450px;
    height: 300px;
    position: absolute;
    left: 30%;
    top: 30%;
}
</style>